<template name="service">
	<view>
		<view class="main-box">
			<dev-navbar weight="700" title="福利中心" mode="center" color="" iconColor="" :isBack="true" bgColor=""></dev-navbar>
			<view class="jkfw">
				<view class="jkfw-image">

				</view>
			</view>
			<view class="flzx">
				<view v-for="(item,index) in listFl" :key="index" class="flzx-b-c">
					<view class="flzx-b-c-1"
						:style="{'background':`url(${item.pic}) no-repeat`,'background-size': '100% 100%'}">
						<view style="position: relative;top: -10rpx;">
							<template v-if="item.title.indexOf('%s')!=-1">
								<u-parse :html="item.title.replace('%s',sportNum)"></u-parse>
							</template>
							<template v-else>
								<u-parse :html="item.title"></u-parse>
							</template>
						</view>
					</view>
					<view class="flzx-b-c-2">
						{{item.name}}
					</view>
					<view class="flzx-b-c-3">
						{{item.des}}
					</view>
					<template>
						<view class="flzx-b-c-4" v-if="item.type==1" @click="lQuClick(item)">
							{{item.buttonName}}
						</view>
						<button class="flzx-b-c-4" open-type="share" v-if="item.type==2">
							{{item.buttonName}}
						</button>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"


	export default {
		components: {
			uParse,
		},
		data() {
			return {
				sportFlag: 0, //
				code: '',
				encryptedData: '',
				iv: '',
				sportNum: 0,
				listFl: [{
						title: '<view>今日步数 <text style="color: #67CA9D;font-size: 24rpx;">%s</text> 步</view>',
						type: 1,
						name: '走路赚钱',
						des: '步数兑换购物金、换购健康服务',
						buttonName: '立即领取',
						pic: 'https://static.bsyjk.cn/fuwu/7E415B6A265D49AC86B9703337B3E55C.png',
						pointDict: 'WALK_MAKE_MONEY'
					},
					{
						title: '新人 <text style="color: #ff0000;font-size: 24rpx;">1</text> 元包邮购',
						type: 2,
						name: '新人专享',
						des: '发送给好友一起来薅羊毛吧',
						buttonName: '邀请好友',
						pic: 'https://static.bsyjk.cn/fuwu/31C6FAC583B241F18E34873A99AD8CFE.png'
					}
				],
			}
		},
		onLoad(e) {
			this.sportFlag = e.sportFlag
			//获取微信运动步数
			this.getSportNum();
			// 配置分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			});

		},
		onShow() {
			//获取微信运动步数
			this.getSportNum();
		},
		methods: {
			//获取微信运动步数
			getSportNum() {
				let _this = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						_this.code = res.code
						uni.getWeRunData({
							success(res) {
								_this.sportFlag = 1
								_this.$https.get(global.apiUrls.getSportNum, {
									encryptedData: res.encryptedData,
									iv: res.iv,
									code: _this.code
								}).then(res => {
									let obj = JSON.parse(res.data.result)
									let arr = obj.stepInfoList
									console.log(arr, '------arr--------')
									_this.sportNum = arr[arr.length - 1].step
								})
							}
						});
					}
				});
			},
			lQuClick(item) {
				this.goToLogin()
				let _this = this
				if (_this.sportFlag == 0) {
					uni.openSetting({
						success(res) {
							console.log(res.authSetting)
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '今日只能领取一次,是否现在领取!',
						success: function(res) {
							if (res.confirm) {
								_this.$https.post(global.apiUrls.addPoint, {
									sportNum: _this.sportNum,
									pointDict: item.pointDict
								}).then(res => {
									_this.$message.info(res.data.message)
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//发送给朋友
			onShareAppMessage(res) {
				return {
					title: '新人 1 元包邮购',
					type: 0,
					// path: 'pages/subpackage/find/share/share?forumId=' + uni.getStorageSync('forumId'),
					// summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
					imageUrl: "https://static.bsyjk.cn/fw/C35272BB07E1415F9AC23671CF8B957D.jpeg"
				}
			},
			//去登录
			goToLogin() {
				this.$basejs.globaltoken();
			},
		}
	}
</script>
<style lang="scss">
	body{
		background-color: #fff;
	}
	.main-box {
		width: 750rpx;
		height: 748rpx;
		// min-height: 100vh;
		background: linear-gradient(185.14deg, #FBF1E5 31.73%, #FBF2E3 56.08%, rgba(251, 242, 227, 0) 100.68%);
		background-size: 750rpx 748rpx;

		.jkfw {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: space-between;

			.jkfw-image {
				width: 522rpx;
				height: 460rpx;
				background: url(https://static.bsyjk.cn/fuwu/F46ABB288F1D4374ADF08F7E7D6A20C7.png) no-repeat;
				background-size: 100% 100%;
				opacity: 0.35;
			}
		}

		.flzx {
			width: 750rpx;
			position: relative;
			display: flex;
			flex-flow: wrap;
			justify-content: space-between;
			padding: 20rpx;

			.flzx-b-c {
				width: 344rpx;
				height: 420rpx;
				background: linear-gradient(180deg, #E9F3FC 0%, #F5F8FF 87.62%, #FFFFFF 97.92%);
				border-radius: 20rpx;
				padding: 20rpx 14rpx 20rpx 14rpx;
				margin-top: 20rpx;
				overflow: hidden;

				.flzx-b-c-1 {
					width: 314rpx;
					height: 238rpx;
					// background: url(https://static.bsyjk.cn/fuwu/7E415B6A265D49AC86B9703337B3E55C.png) no-repeat;
					// background-size: 100% 100%;
					border-radius: 25rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 800;
					font-size: 18rpx;
					line-height: 126.2%;
					text-align: center;
					letter-spacing: 0.4rpx;
					color: #979797;
				}

				.flzx-b-c-2 {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 26rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
					margin-top: 14rpx;
				}

				.flzx-b-c-3 {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 18rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
					color: #979797;
				}

				.flzx-b-c-4 {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 44rpx;
					width: 236rpx;
					height: 54rpx;
					background: #FCE3BA;
					border-radius: 27px;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 126.2%;
					text-align: center;
					letter-spacing: 0.4rpx;
					color: #634419;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
